<!--
 * @Author: jyq
 * @Date: 2022-07-02 09:32:21
 * @LastEditTime: 2022-07-08 11:45:42
 * @LastEditors: jyq
 * @Description: 
 * @FilePath: \dasantest2\day06\vue3-project\src\views\Login.vue
 * 可以输入预定的版权声明、个性签名、空行等
-->
<template>
<div class="header">
    <div class="left">中文(简体)<van-icon name="arrow-down" /></div>
    <div class="right">
    <van-icon class="help" name="shield-o" /> <span>帮助</span>
    </div>
</div>
<div class="content1">
    <div class="title">小米账号登录</div>
    <div v-if="showephone">
    <img src="https://static.account.xiaomi.com/uiTheme/images/miotstore/logo.svg" />
    <br/>
    <br/>
    <span>欢迎登录小米有品</span>
    </div>
</div>
<div class="bottom">
    <div class="input">
<van-form @submit="onSubmit">
 <div v-if="showephone" class="phone">
     <van-cell-group inset>
    <van-field
      v-model="phoneNumber"
      name="phone"
      label="+86"
      placeholder="请输入手机号"
      :rules="[{ validator, message: '手机号输入有误' }]"
    />
  </van-cell-group>
  <div class="myButton">
    <van-button round block size="default" type="primary" native-type="submit">
      下一步
    </van-button>
  </div>
 </div>
  <div v-if="!showephone" class="code">
    <div class="text">验证码已发送至+86 {{phoneNumber}}
    <div @click="editHandle" class="editbtn">修改</div>
    </div>
    <van-cell-group inset>
    <van-field
    v-model="code"
    name="code"
    placeholder="请输入验证码"
    :rules="[{ required: true, message: '请输入验证码' }]"
    />
    </van-cell-group>
    <div class="myButton">
    <van-button round block size="default" type="primary" native-type="submit">
    登录
    </van-button>
    </div>

    </div>
</van-form>
    </div>
</div>

</template>

<script setup>
import { Toast } from "vant";
import {ref} from "vue";
import {useRouter} from "vue-router";
const phoneNumber = ref('');
const showephone = ref('true')
const code = ref('');
//随机生成的验证码
const codes = ref('')
const router = useRouter()
//生成验证码
const sendCode = ()=>{
    let code = ''
    for (let i = 0; i <=4 ; i++){
    code +=Math.floor( Math.random() * 10)
    }
    console.log("验证码",code)
    return code;
    
}
 const validator = (val) =>val.length>0? /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/.test(val):'请输入手机号';
const onSubmit = (values) => {
console.log('submit', values);
if(values.phone){
    showephone.value=false;
    //发送验证码
   codes.value =  sendCode()
}else{
    //判断验证码是否正确
    if(values.code==codes.value){
        //缓存用户信息
        sessionStorage.setItem('user',phoneNumber.value);
      router.push('/')
    }else{
        Toast.fail('验证码不正确')
    }
}

};
const editHandle = ()=>{
   showephone.value=true;
   phoneNumber.value='';
   code.value = ''
}
</script>

<style lang="less" scoped>
.header{
    margin-top: 15px;
    .left{
        float: left;
        margin-left: 30px;
        font-size: 13px;
        color: rgba(0,0,0,0.54);
    }
    .right{
        float: right;
        span{
            margin-right: 26px;
            font-size: 13px;
            color: rgba(0,0,0,0.54);
        }
      .help{
        margin-right: 25px;
      }
    }
}
.content1{
    display: inline-block;
    margin-top: 3px;
    width: 100%;
    height: 240px;
    background-image: url('https://cdn.web-global.fds.api.mi-img.com/mcfe--mi-account/static/static/media/background.d3d7d2dd.png');
    background-size:cover;
    .title{
        font-size: 21px;
        margin-left: 120px;
    }
    img{
        margin-top: 50px;
        width:48px;
        margin-left: 160px;
    }
    span{
        margin-left: 130px;
        font-size: 14px;
        color: rgba(0,0,0,0.45);
    }
}
.bottom{
    .input{
        width: 100%;
        height: 160px;
         .van-cell{
        width: 500px;
        font-size:18px;
        height: 50px;
        border-radius: 12px;
        margin-left: 10px;
        background-color: #f0f0f0;
        --van-field-label-margin-right:-45px;
    }
    .myButton{
        margin: 40px;
        font-weight: bold;
    }
    }
}
.code{
    margin-top: -200px;
    .text{
        color: rgba(0,0,0,0.65);
        font-weight: 500;
        font-size: 13px;
        text-align: left;
        margin: 40px 0;
        padding: 0 25px;
        display: inline-block;
    }
     .myButton{
        margin: 40px;
        font-weight: bold;
    }
    .editbtn{
        color: #0b84ff;
        font-size: 13px;
        margin-left: 290px;
        margin-top: -21px;
    }
}

</style>
<style>

</style>